<template>
  <div class="main-pre">
    <div class="main-left">
      <p class="title">浙东流域虚拟仿真漫游</p>
      <div class="btns">
        <el-button type="info" @click="goComment">讨论区<i class="el-icon-upload el-icon--right"></i></el-button>
        <el-button type="info" icon="el-icon-search">申报年份2021</el-button>
      </div>
      <ul class="tags">
        <li>所属专业类：艺术学类&nbsp;</li>
        <li>对应专业：动画&nbsp;</li>
        <li>课程类型：专业必修课&nbsp;</li>
        <li>实验类型：综合设计型</li>
      </ul>
      <div class="infos">
        <p style="font-size: 14px">
          紧扣“绿水青山”这时代背景，选取浙东运河作为实验对象，培养学生尊重
          自然和城镇的发展规律，坚持以人民为核心的设计理念，以增加人民福祉为目的，
          推进生态建设，改善环境质量，塑造地理风貌，努力打造和谐宜居、富有活力、
          具有特殊的浙东流地域的自然风光。
        </p>
      </div>
      <el-button type="primary" size="medium" @click="goExperiment">我要做实验</el-button>
    </div>
    <div class="main-right">
      <div v-show="isShow">
        <div class="videoTab">
          <el-button @click="isShowVideo = true" class="btn1">实验简介视频</el-button>
          <el-button @click="isShowVideo = false" class="btn2" disabled>教学引导视频</el-button>
        </div>
        <div class="video-box">
          <video v-show="isShowVideo" src="../../assets/img/虚拟仿真项目视频 浙东流域.mp4" class="video" preload="preload"
            controls></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isShowVideo: true,
    };
  },
  methods: {
    goExperiment() {
      this.$router.push("/experiment");
    },
    goComment() {
      this.$router.push("/experiment/comment");
    },
  },
};
</script>

<style scoped>
.main-pre {
  height: 380px;
  width: 100%;
  display: flex;
  /* padding: 0 100px; */
}

.main-left {
  background: radial-gradient(ellipse at center,
      rgba(116, 69, 103, 1) 0%,
      rgba(116, 69, 103, 1) 22%,
      rgba(106, 65, 102, 1) 35%,
      rgba(86, 60, 93, 1) 46%,
      rgba(47, 58, 89, 1) 66%,
      rgba(47, 58, 89, 1) 100%);
  height: 380px;
  width: 100%;
  padding-left: 100px;
}

.title {
  font-size: 24px;
  color: white;
  font-weight: 600;
}

.tags {
  white-space: nowrap;
  font-size: 14px;
  display: flex;
  width: 100%;
  color: #fff;
  opacity: 0.5;
  margin-left: -2px;
  margin-top: 15px;
  line-height: 20px;
}

.main-right {
  /* width: 40%; */
  background-color: #2f3a59;
  padding-top: 60px;
  padding-right: 100px;
  padding-left: 76px;

  .videoTab {
    margin-bottom: 5px;
  }
}

.infos {
  color: #fff;
}

.video {
  width: 380px;
  /* height: 218px; */
}

.btn1:hover {
  background-color: #2f3a59 !important;
}

.btn2:hover {
  background-color: #2f3a59 !important;
}
</style>
